<template>
  <div class="background-animation">
    <canvas ref="canvas" class="animation-canvas"></canvas>
    <div class="gradient-overlay"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'

const canvas = ref(null)
let ctx = null
let animationId = null
let particles = []

/**
 * Particle class for background animation
 */
class Particle {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.size = Math.random() * 3 + 1
    this.speedX = Math.random() * 2 - 1
    this.speedY = Math.random() * 2 - 1
    this.opacity = Math.random() * 0.5 + 0.2
    this.color = this.getRandomColor()
  }

  getRandomColor() {
    const colors = ['#667eea', '#764ba2', '#f093fb', '#4ecdc4']
    return colors[Math.floor(Math.random() * colors.length)]
  }

  update() {
    this.x += this.speedX
    this.y += this.speedY

    // Wrap around screen
    if (this.x > canvas.value.width) this.x = 0
    if (this.x < 0) this.x = canvas.value.width
    if (this.y > canvas.value.height) this.y = 0
    if (this.y < 0) this.y = canvas.value.height

    // Pulse effect
    this.opacity += Math.sin(Date.now() * 0.001 + this.x * 0.01) * 0.01
    this.opacity = Math.max(0.1, Math.min(0.8, this.opacity))
  }

  draw() {
    ctx.save()
    ctx.globalAlpha = this.opacity
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
    ctx.restore()
  }
}

/**
 * Initialize canvas and particles
 */
const initAnimation = () => {
  if (!canvas.value) return

  ctx = canvas.value.getContext('2d')
  resizeCanvas()

  // Create particles
  particles = []
  const particleCount = Math.floor((canvas.value.width * canvas.value.height) / 15000)
  
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle(
      Math.random() * canvas.value.width,
      Math.random() * canvas.value.height
    ))
  }

  animate()
}

/**
 * Resize canvas to match window size
 */
const resizeCanvas = () => {
  if (!canvas.value) return
  
  canvas.value.width = window.innerWidth
  canvas.value.height = window.innerHeight
}

/**
 * Animation loop
 */
const animate = () => {
  if (!ctx || !canvas.value) return

  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)

  // Update and draw particles
  particles.forEach(particle => {
    particle.update()
    particle.draw()
  })

  // Draw connections between nearby particles
  drawConnections()

  animationId = requestAnimationFrame(animate)
}

/**
 * Draw connections between nearby particles
 */
const drawConnections = () => {
  const maxDistance = 100

  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const dx = particles[i].x - particles[j].x
      const dy = particles[i].y - particles[j].y
      const distance = Math.sqrt(dx * dx + dy * dy)

      if (distance < maxDistance) {
        const opacity = (1 - distance / maxDistance) * 0.2
        
        ctx.save()
        ctx.globalAlpha = opacity
        ctx.strokeStyle = '#667eea'
        ctx.lineWidth = 1
        ctx.beginPath()
        ctx.moveTo(particles[i].x, particles[i].y)
        ctx.lineTo(particles[j].x, particles[j].y)
        ctx.stroke()
        ctx.restore()
      }
    }
  }
}

/**
 * Handle window resize
 */
const handleResize = () => {
  resizeCanvas()
  // Recreate particles for new canvas size
  const particleCount = Math.floor((canvas.value.width * canvas.value.height) / 15000)
  
  while (particles.length < particleCount) {
    particles.push(new Particle(
      Math.random() * canvas.value.width,
      Math.random() * canvas.value.height
    ))
  }
  
  while (particles.length > particleCount) {
    particles.pop()
  }
}

onMounted(() => {
  initAnimation()
  window.addEventListener('resize', handleResize)
  
  // Add entrance animation
  gsap.fromTo(canvas.value, 
    { opacity: 0 },
    { opacity: 1, duration: 2, ease: 'power2.out' }
  )
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.animation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(15, 15, 35, 0.1) 0%,
    rgba(15, 15, 35, 0.3) 50%,
    rgba(15, 15, 35, 0.6) 100%
  );
  pointer-events: none;
}
</style>
